<template>
	<view class="mainPage">
		<!-- <view class="banner">
			<u-swiper :list="bannerList" height="360" :indicator="true" ></u-swiper>
		</view> -->
		<u-cell-group class="new-mode" :border="false">
				<u-cell v-for="(item,index) in msgList" :key="index">
					<u-avatar :src="item.avatar" size="85" slot="icon"></u-avatar>
					<view class="msgRight" slot="value">
						<view class="msg-cont">
							<view class="msg-cont-left">
								<view class="msg-top">
									<view class="isRead" v-if="item.status === 1"></view>
									<view class="msg-title">
										{{item.name}}
									</view>
								</view>
								<view class="msg-bottom">{{item.tips}}</view>
							</view>
							<view class="msg-cont-right">
								{{item.date}}
							</view>
						</view>
						
					</view>
					
				</u-cell>
			
			
			</u-cell-group>
		<!-- 	<view class="news new-mode">
				<view class="news-li" v-for="(item,index) in msgList" :key="index">
					<view class="touxiang">
						<image :src="item.avatar" class="touxiang-icon"></image>
					</view>
					<view class="msgRight" slot="value">
						<view class="msg-cont">
							<view class="msg-cont-left">
								<view class="msg-top">
									<view class="isRead" v-if="item.status === 1"></view>
									<view class="msg-title">
										{{item.name}}
									</view>
								</view>
								<view class="msg-bottom">{{item.tips}}</view>
							</view>
							<view class="msg-cont-right">
								{{item.date}}
							</view>
						</view>
						
					</view>
				</view>
			</view> -->
		<block v-if="msgList.length == 0 && (page != 1 || active== 0)">
			<emptyPage title="暂无消息～" :noImage="`${domain}/static/images/empty-box.png`"></emptyPage>
		</block>
		<!-- <home></home> -->
	</view>
</template>

<script>
	import {
		getArticleCategoryList,
		getArticleList,
		getArticleHotList
	} from '@/api/api.js';
	// import home from '@/components/home';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			// home,
			emptyPage
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				imgUrls: [],
				articleList: [],
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				navList: [],
				active: 0,
				page: 1,
				limit: 8,
				status: false,
				scrollLeft: 0,
				/* navList1: [{
					article_category_id: "1",
					title: "最新钓鱼大赛"
				}, {
					article_category_id: "2",
					title: "最新优惠活动"
				}, {
					article_category_id: "3",
					title: "最新优惠活动"
				}],
				articleList1: [{
					article_category_id: "1",
					title: "最新优惠活动",
					create_time: "2024/11/23",
					image_input: "/static/images/user2.png",
					article_id:"1"
				},{
					article_category_id: "2",
					title: "最新优惠活动",
					create_time: "2024/11/23",
					image_input: "/static/images/user2.png",
					article_id:"2"
				},{
					article_category_id: "3",
					title: "最新优惠活动",
					create_time: "2024/11/23",
					image_input: "/static/images/user2.png",
					article_id:"3"
				},{
					article_category_id: "4",
					title: "最新优惠活动",
					create_time: "2024/11/23",
					image_input: "/static/images/user2.png",
					article_id:"4"
				}], */
				/* bannerList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				], */
				msgList:[
					/* {
						avatar:'/static/pic/fish.jpg',
						name:'水上田园',
						tips:'邀请你参加百万奖金大赛',
						date:'2024/11/25',
						status:1,//0:已读 1：未读
					},
					{
						avatar:'/static/pic/avatar.png',
						name:'众乐钓鱼场',
						tips:'邀请你参加百万奖金大赛',
						date:'2024/11/23',
						status:1,//0:已读 1：未读
					},
					{
						avatar:'/static/pic/fish.jpg',
						name:'水上田园',
						tips:'邀请你参加百万奖金大赛',
						date:'2024/11/21',
						status:0,//0:已读 1：未读
					},
					{
						avatar:'/static/pic/fish.jpg',
						name:'杏花村钓鱼场',
						tips:'邀请你参加路亚百万奖金争霸赛',
						date:'2024/11/20',
						status:0,//0:已读 1：未读
					} */
				]
			};
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onLoad: function() {
			this.getArticleCate();
			this.status = false;
			this.page = 1;
			this.articleList = [];
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getCidArticle();
		},
		methods: {
			getArticleHot: function() {
				let that = this;
				getArticleHotList().then(res => {
					that.$set(that, 'articleList', res.data);
				});
			},
			getCidArticle: function() {
				let that = this;
				if (that.active == 0) return;
				let limit = that.limit;
				let page = that.page;
				let articleList = that.articleList;
				if (that.status) return;
				getArticleList(that.active, {
					page: page,
					limit: limit
				}).then(res => {
					let articleListNew = [];
					let len = res.length;
					articleListNew = articleList.concat(res.data.list);
					that.page++;
					that.$set(that, 'articleList', articleListNew);
					that.status = limit > len;
					that.page = that.page;
				});
			},
			getArticleCate: function() {
				let that = this;
				getArticleCategoryList().then(res => {
					this.active = res.data[0].article_category_id
					that.$set(that, 'navList', res.data);
					this.getCidArticle();
				});
			},
			tabSelect(active) {
				this.active = active;
				if (this.active == 0) this.getArticleHot();
				else {
					this.$set(this, 'articleList', []);
					this.page = 1;
					this.status = false;
					this.getCidArticle();
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.newsList .nav {
		padding: 0 30rpx;
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		padding-top: 43rpx;
	}

	.newsList .nav .item {
		display: inline-block;
		font-size: 32rpx;
		color: #999;
		min-width: 130rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		position: relative;
		padding-bottom: 20rpx;
		text-align: center;
	}

	.newsList .nav .item.on {
		color: #282828;
	}

	.newsList .nav .item~.item {
		margin-left: 46rpx;
	}

	.newsList .nav .item .line {
		width: 24rpx;
		height: 4rpx;
		border-radius: 2rpx;
		margin: 10rpx auto 0 auto;
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		margin-left: -12rpx;
	}

	.newsList .list .item {
		border-bottom: 1px solid #f0f0f0;
		padding: 35rpx 30rpx;
	}

	.newsList .list .item .pictrue {
		width: 250rpx;
		height: 156rpx;
		border-radius: 16rpx;
	}

	.newsList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.newsList .list .item .text {
		width: 360rpx;
		height: 156rpx;
		font-size: 24rpx;
		color: #999;
	}

	.newsList .list .item .text .name {
		font-size: 30rpx;
		color: #282828;
	}

	.newsList .list .item .picList .pictrue {
		width: 335rpx;
		height: 210rpx;
		border-radius: 16rpx;
	}

	.newsList .list .item .picList.on .pictrue {
		width: 217rpx;
		height: 136rpx;
		border-radius: 16rpx;
	}

	.newsList .list .item .picList .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.empty-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;

		image {
			width: 414rpx;
			height: 240rpx;
		}

		.txt {
			font-size: 26rpx;
			color: #999;
			text-align: center;
		}
	}
	.mainPage{
		.new-mode{}
		.msgRight{
			width: 580rpx;
			margin-left: 20rpx;
			.msg-cont{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.msg-cont-left{
					.msg-top{
						display:flex;
						flex-direction: row;
						justify-content: flex-start;
						margin-bottom: 10rpx;
						.isRead{
							width: 12rpx;
							height: 12rpx;
							border-radius: 50px;
						    background-color: #549CE3;
							margin-top: 14rpx;
							margin-right: 10rpx;
						}
						.msg-title{
							font-size: 30rpx;
							font-weight: bold;
						}
					}
					.msg-bottom{
						font-size: 24rpx;
						color: #9f9f9f;
					}
				}
				.msg-cont-right{
					font-size: 24rpx;
					color: #6f6f6f;
					margin-top: 6rpx;
				}
			}
			.already{
				.msg-cont-left{
					.msg-top{
						.isRead{
							background-color: #999;
						}
						.msg-title{
							color: #999;
						}
					}
				}
				
			}
		}
	}
	.banner {
		margin-bottom: 40rpx;
	
	}
</style>
<style lang="scss">
	page{
		background-color: #ffffff;
	}
	.news{
		.news-li{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
			.touxiang{
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				margin-right: 20rpx;
				.touxiang-icon{
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
		.news-li:nth-last-child(1){
			border-bottom: none;
		}
	}
</style>